<template>
  <div class="news">
    <!--枸杞价格走势-->
    <div class="trend-container">
      <!--标题-->
      <div class="title-wrapper">
        <div class="news-title">
          <a class="news-title-name" href="">价格详情</a>
        </div>
      </div>
      <div id="myChart" :style="{width: 'calc(100% - 2px)', height: '400px'}"></div>
    </div>
    <!--枸杞要闻-->
    <div class="news-container">
      <!--标题-->
      <div class="title-wrapper">
        <div class="news-title">
          <a class="news-title-name" href="" data-control="">枸杞要闻</a>
        </div>
      </div>
      <!--新闻列表-->
      <div class="important-news">
        <!--左侧新闻列表-->
        <ol class="column">
          <li v-for="(item,index) of newsList" :key="index">
            <a target="_blank" :href="item.url" >
              <i class="order">{{(index+1)}}</i>
              <span class="title" :title="item.content">{{item.content}}</span>
              <span class="ext">{{item.time}}</span>
            </a>
          </li>
        </ol>
        <!--右侧新闻列表-->
        <ol class="column">
          <li v-for="(item,index) of newsList" :key="index">
            <a target="_blank" :href="item.url">
              <i class="order">{{(index+6)}}</i>
              <span class="title" :title="item.content">{{item.content}}</span>
              <span class="ext">{{item.time}}</span>
            </a>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsDynamic',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      newsList: [
        {id: 0, url: 'http://finance.ifeng.com/c/7uNrm2yI8As', content: '宁夏中宁28家枸杞企业复工投产', time: '2020-1-23'},
        {id: 1, url: 'http://finance.sina.com.cn/money/future/agri/2020-02-25/doc-iimxxstf4302168.shtml', content: '“小枸杞”铺就农户致富路', time: '2020-1-31'},
        {id: 2, url: 'https://baijiahao.baidu.com/s?id=1659585742345820115&wfr=spider&for=pc', content: '枸杞和它“天生一对”，坚持泡水喝，补充肾气，肝或许更上一层楼', time: '2020-1-27'},
        {id: 3, url: 'https://baijiahao.baidu.com/s?id=1659527140801800742&wfr=spider&for=pc', content: '枸杞栽培管理技术明白册', time: '2020-1-25'},
        {id: 4, url: 'https://baijiahao.baidu.com/s?id=1659427349056553249&wfr=spider&for=pc', content: '天天饮用红枣枸杞泡茶，对身体真的有坏处吗？今天来告诉各位答案', time: '2020-1-24'}
      ],
      newsList2: [
        {id: 5, url: 'https://baijiahao.baidu.com/s?id=1659404627492790319&wfr=spider&for=pc', content: '枸杞几月采桩?如何上盆？上盆后如何养护呢？', time: '2020-1-23'},
        {id: 6, url: 'https://baijiahao.baidu.com/s?id=1659326913987189647&wfr=spider&for=pc', content: '枸杞钓鲫鱼，这又是什么“神饵”，分析枸杞作钓鲫鱼的可行性', time: '2020-1-31'},
        {id: 7, url: 'https://baijiahao.baidu.com/s?id=1658980406436494305&wfr=spider&for=pc', content: '枸杞泡水，切记“三细节”，别忽视，否则泡了也白泡，效果不大', time: '2020-1-27'},
        {id: 8, url: 'https://baijiahao.baidu.com/s?id=1659069733410427692&wfr=spider&for=pc', content: '掌握枸杞生长发育环境，种植技术和采收加工方法，提高枸杞的产量', time: '2020-1-25'},
        {id: 9, url: 'https://baijiahao.baidu.com/s?id=1658337424316402229&wfr=spider&for=pc', content: '柴达木枸杞地方标准正式发布', time: '2020-1-24'}
      ]
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let option = {
        title: {
          text: '本周枸杞走势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [
            {
              name: '中宁枸杞',
              icon: 'roundRect'
            },
            {
              name: '靖远枸杞',
              icon: 'roundRect'
            },
            {
              name: '瓜州枸杞',
              icon: 'roundRect'
            },
            {
              name: '青海枸杞',
              icon: 'roundRect'
            },
            {
              name: '新疆枸杞',
              icon: 'roundRect'
            }
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            symbol: ['none', 'arrow']
          }
        },
        yAxis: {
          type: 'value',
          min: 20,
          axisLine: {
            symbol: ['none', 'arrow']
          }
        },
        series: [
          {
            name: '中宁枸杞',
            type: 'line',
            data: [28, 27, 25, 30, 25, 24, 28]
          },
          {
            name: '靖远枸杞',
            type: 'line',
            data: [25, 27, 23, 28, 28, 24, 26]
          },
          {
            name: '瓜州枸杞',
            type: 'line',
            data: [23, 30, 22, 30, 23, 22, 25]
          },
          {
            name: '青海枸杞',
            type: 'line',
            data: [21, 23, 21, 27, 25, 24, 28]
          },
          {
            name: '新疆枸杞',
            type: 'line',
            data: [20, 24, 26, 28, 25, 24, 28]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "../../../assets/stylus/common.styl"
  .news
    min-height 500px
    .trend-container
      margin-top 10px
      newsTitle()
      #myChart
        margin-top 10px
        border:1px solid #EEE
    .news-container
      margin-top 20px
      min-height 500px
      newsTitle()
      .important-news
        .column
          float: left;
          width: 50%;
          margin-top: 10px;
          &:first-child
            width calc(50% - 20px)
            margin-right 20px
          &:first-child li:nth-of-type(-n+3) .order
            color: #3da6ff;
          li
            display: list-item;
            text-align: -webkit-match-parent;
            a
              width 100%
              height: 35px;
              line-height: 35px;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-right: 200px;
              color: #333333;
              display flex
              justify-content space-between
              &:hover
                color: #58a6e7;
              .order
                display block
                margin-right: 10px;
                font-size: 14px;
                vertical-align: top;
                &:hover
                  color: #58a6e7;
              .title
                display block
                width 72%
                color: #333
                font-size: 18px;
                font-family:'PingFang SC', tahoma, arial, 'helvetica neue', 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif
                &:hover
                   color: #58a6e7;
              .ext
                width 27%
                display block
                font-size: 14px;
                color: #999999;
                text-align right
</style>
